<template>
  <div>
    <my-bread level1="数据统计" level2="数据报表"></my-bread>
    <el-card>
      <div id="main" style="width: 600px; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
let echarts = require('echarts')
export default {
  data() {
    return {
    }
  },
  mounted() { // 操作dom了,所以要放在mounted中
    this.useEcharts()
  },
  methods: {
    async useEcharts() {
      // 初始化
      let myChart = echarts.init(document.getElementById('main'))
      // option
      // 获取数据
      const { data: res } = await this.$http.get('reports/type/1')
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取报表数据失败')
      let option2 = res.data
      let option1 = {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      }
      let option = { ...option1, ...option2 }
      // setOption
      myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
